<template>
  <div>
    <common-card
      title="累计销售额"
      value="21,157,420"
    >
      <template>
        <v-chart :options="getOption()" />
<!--        <div-->
<!--          id="total-orders-chart"-->
<!--          :style="{width: '100%', height: '100%'}"-->
<!--        />-->
      </template>
      <template v-slot:footer>
        <span>昨日销售</span>
        <span class="emphasis">￥2,000,000</span>
      </template>
    </common-card>
  </div>
</template>

<script>
import commonCardMixin from '@/components/mixins/commonCardMixin.js'
export default {
  mixins: [commonCardMixin],
  mounted () {
    // const chartDom = document.getElementById('total-orders-chart')
    // const chart = this.$echarts.init(chartDom)
    // chart.setOption({
    //   xAxis: {
    //     type: 'category', // 配置折线
    //     show: false, // 隐藏
    //     boundaryGap: false
    //   },
    //   yAxis: {
    //     show: false
    //   },
    //   series: [{
    //     type: 'line',
    //     data: [620, 432, 220, 534, 790, 430, 220, 320, 532, 320, 834, 690, 530, 220, 620],
    //     areaStyle: {
    //       color: 'purple'
    //     },
    //     lineStyle: { // 线坐标
    //       width: 0
    //     },
    //     itemStyle: { // 点坐标
    //       opacity: 0
    //     },
    //     smooth: true // 平滑
    //   }],
    //   grid: { // 布局
    //     top: 0,
    //     bottom: 0,
    //     left: 0,
    //     right: 0
    //   }
    // })
  },
  methods: {
    getOption () {
      return {
        xAxis: {
          type: 'category', // 配置折线
          show: false, // 隐藏
          boundaryGap: false
        },
        yAxis: {
          show: false
        },
        series: [{
          type: 'line',
          data: [620, 432, 220, 534, 790, 430, 220, 320, 532, 320, 834, 690, 530, 220, 620],
          areaStyle: {
            color: 'purple'
          },
          lineStyle: { // 线坐标
            width: 0
          },
          itemStyle: { // 点坐标
            opacity: 0
          },
          smooth: true // 平滑
        }],
        grid: { // 布局
          top: 0,
          bottom: 0,
          left: 0,
          right: 0
        }
      }
    }
  }
}
</script>

<style scoped>

</style>
